<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  .xxx {
    display: flex;
    padding: 20px 20px 20px 60px;
    justify-content: space-around;
    align-content: center;
    background-color: pink;
  }

  .inner {
    display: flex;
    padding: 20px 20px 20px 60px;
    align-content: center;
    justify-content: space-around;

  }

  .inner:nth-child(odd) {
    background-color: pink;
  }

  span {
    width: 80px;
    text-align: center;
  }

  img {
    width: 50px;
    height: 50px;
  }

  .yyy {
    width: 800px;
    height: 600px;
    position: relative;
  }



  .num1 {
    position: absolute;
    top: 68px;
    left: 20px;
  }

  .num2 {
    position: absolute;
    top: 131px;
    left: 20px;
  }

  .num3 {
    position: absolute;
    top: 189px;
    left: 20px;
  }

</style>

<body>


  <div id="list" class="yyy">
    <div class="xxx">
      <span>姓名</span>
      <span>数学</span>
      <span>语文</span>
      <span>英语</span>
      <span>地理</span>
      <span>历史</span>
      <span>总分</span>
    </div>
    <div v-for="items in list" class="inner">
      <span>{{items.name}}</span>

      <span>{{items.score[0].math}}</span>

      <span>{{items.score[0].chinese}}</span>

      <span>{{items.score[0].english}}</span>

      <span>{{items.score[0].geography}}</span>

      <span>{{items.score[0].history}}</span>

      <span>{{items.score[0].math + items.score[0].chinese + items.score[0].english + items.score[0].geography + items.score[0].history}}</span>
    </div>
  </div>
  <img src="./num1.jpg" class="num1">
  <img src="./num2.jpg" class="num2">
  <img src="./num3.jpg" class="num3">

</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#list",
    data: {
      list: [{
        name: '肖枫',
        score: [{
          math: 99,
          chinese: 100,
          english: 100,
          geography: 99,
          history: 98
        }]
      }, {
        name: '安澜',
        score: [{
          math: 90,
          chinese: 98,
          english: 89,
          geography: 96,
          history: 100
        }]
      }, {
        name: '路小北',
        score: [{
          math: 88,
          chinese: 87,
          english: 77,
          geography: 86,
          history: 78
        }]
      }, {
        name: '许巍',
        score: [{
          math: 39,
          chinese: 40,
          english: 76,
          geography: 90,
          history: 59
        }]
      }, ]
    }
  })

</script>

</html>
